<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../util/icon/iconfont.css">
    <link rel="stylesheet" href="../util/bootstrap-4.6.0/css/bootstrap.css">
    <script src="../util/icon/iconfont.js"></script>
</head>
<body>
<div class="nav">
    <div class="left">
        登录时间：<span id="loginTime">2021-06-04 15:02:14</span>
    </div>
    <div class="right">
        <div>
            欢迎您：<span id="userName">guest</span>
        </div>
        <div>
            <svg class="icon logout" aria-hidden="true">
                <use xlink:href="#icon-logout"></use>
            </svg>
            <a id="logoutbtn" style="cursor: pointer">登出</a>
        </div>
    </div>
</div>
<div class="containerDiv">
    <div class="row">
        <div class="element">
            <div>
                <svg class="icon size" aria-hidden="true">
                    <use xlink:href="#icon-rsa"></use>
                </svg>
            </div>
            <p>
                RSA算法登录密码填充及后台解密
            </p>
            <div>
                <button type="button" class="btn btn-primary" data-toggle="popover"
                        title="实现：" data-html="true" data-trigger="hover"
                        data-content="1.登录页面：login.html <br>
                        2.注册页面：registry.html <br>
                        3.后台：RSAUtil.decryptStringByJs()方法">
                    Learn
                </button>
            </div>
        </div>
        <div class="element">
            <div>
                <svg class="icon size" aria-hidden="true">
                    <use xlink:href="#icon-key"></use>
                </svg>
            </div>
            <p>
                Json Web Token的使用及会话管理
            </p>
            <div>
                <button type="button" class="btn btn-primary" data-toggle="popover"
                        title="实现：" data-html="true" data-trigger="hover"
                        data-content="
                        1.生成JWT：登录逻辑：/demo/login <br>
                        2.会话管理：<br>
                        <ul>
                            <li>前端common.js对ajaxSend的统一拦截：请求头增加userToken首部字段；
                            </li>
                            <li>后台网关过滤器：对JWT的统一验证与放行
                            </li>
                        </ul>
                        ">
                    Learn
                </button>
            </div>
        </div>
        <div class="element">
            <div>
                <svg class="icon size" aria-hidden="true">
                    <use xlink:href="#icon-xml"></use>
                </svg>
            </div>
            <p>
                XML报文生成及解析
            </p>
            <div>
                <button type="button" class="btn btn-primary"
                        onclick="clickBtn('/entry/list.html')">
                    Learn
                </button>
            </div>
        </div>
        <div class="element">
            <div>
                <svg class="icon size" aria-hidden="true">
                    <use xlink:href="#icon-excel"></use>
                </svg>
            </div>
            <p>
                JXLS实现Excel导入导出
            </p>
            <div>
                <button type="button" class="btn btn-primary" data-toggle="popover"
                        title="实现：" data-html="true" data-trigger="hover"
                        data-content="1.登录页面：login.html <br>
                        2.注册页面：registry.html <br>
                        3.后台：RSAUtil.decryptStringByJs()方法">
                    Learn
                </button>
            </div>
        </div>
        <div class="element">
            <div>
                <svg class="icon size" aria-hidden="true">
                    <use xlink:href="#icon-Pdf"></use>
                </svg>
            </div>
            <p>
                JasperReport制作PDF报表
            </p>
            <div>
                <button type="button" class="btn btn-primary" data-toggle="popover"
                        title="实现：" data-html="true" data-trigger="hover"
                        data-content="1.登录页面：login.html <br>
                        2.注册页面：registry.html <br>
                        3.后台：RSAUtil.decryptStringByJs()方法">
                    Learn
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="element">
            <div>
                <svg class="icon size" aria-hidden="true">
                    <use xlink:href="#icon-dingshirenwu"></use>
                </svg>
            </div>
            <p>
                手工动态创建多个Scheduled任务
            </p>
            <div>
                <button type="button" class="btn btn-primary" data-toggle="popover"
                        title="实现：" data-html="true" data-trigger="hover"
                        data-content="
                        1.FixedThreadPoolScheduledTask，使用同一个线程池的反面示例 <br>
                        2.DynamicCreateScheduledTask，每个任务一个单例线程池，互不干扰 <br>
                        ">
                    Learn
                </button>
            </div>
        </div>
    </div>


</div>
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/common.js"></script>
<script src="../util/layer/layer.js"></script>
<script src="../util/bootstrap-4.6.0/js/bootstrap.bundle.js"></script>
<script>
    $(function () {
        //从jwt里获取用户信息
        let token = getCookie(tokenKey);
        if (token) {
            let tokenArr = token.split('.');
            if (tokenArr.length != 3) {
                layer.msg('token不合法', {icon: 2, time: 1500}, function () {
                    window.location.href = "login.html";
                })
            } else {
                let tokenPayload = tokenArr[1];
                let decodedTokenPayload = Base64.decode(tokenPayload);
                //console.info('decodedTokenPayload=',decodedTokenPayload);//解码后发现最后有2个assci码为0的空白符号
                decodedTokenPayload = decodedTokenPayload.slice(0, decodedTokenPayload.lastIndexOf("}") + 1);
                const payloadObj = JSON.parse(decodedTokenPayload);
                $("#loginTime").text(payloadObj.loginTime);
                $("#userName").text(payloadObj.userName);

            }
        } else {
            //icon的选择逻辑：在layer.css中搜索layui-layer-ico，有layui-layer-ico[1-6]的样式，对应的图片是icon.png
            layer.msg("游客请登录!", {icon: 2, time: 1500}, function () {
                window.location.href = "login.html";
            })
        }
        //初始化bootstrap的popover弹框组件
        $('[data-toggle="popover"]').popover();
    })
    $("#logoutbtn").on('click', function () {
        $.ajax({
            url: "/demo/logout",
            type: "GET",
            success: result => {
                if (result.code == 1) {
                    layer.msg(result.data, {icon: 1, time: 1500}, function () {
                        delCookie(tokenKey);
                        window.location.href = "login.html";
                    })
                }
            }
        })
    })

    function clickBtn(toUrl) {
        window.location.href = window.location.origin + "/views/html" + toUrl;
    }
</script>
</body>
<style>
    html, body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: #dedede;
    }

    .nav {
        width: 100%;
        height: 8%;
        background: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        opacity: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /*阴影效果*/
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.14), 0 0px 6px rgba(0, 0, 0, 0.16);
        font-size: 18px;
    }

    .containerDiv {
        position: absolute;
        top: 12%;
        left: 0;
        width: 94%;
        height: 86%;
        /*垂直、水平居中*/
        margin: auto 3%;
        /*阴影效果*/
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.14), 0 0px 6px rgba(0, 0, 0, 0.16);
        border-radius: 30px;
        background: #ffffff;
    }

    .nav .left {
        margin-left: 2em;
        color: #000;
    }

    .nav .right {
        margin-right: 2em;
        color: #000;
        display: flex;
        flex-direction: row;
    }

    .icon.logout {
        /*图标样式可像font一样调整样式*/
        font-size: 18px;
        color: #000000;
    }

    .icon.size {
        font-size: 80px;
    }

    .nav .right div:last-child {
        margin-left: 2em;
    }

    .containerDiv .row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 40px;
        width: 100%;
    }

    .element {
        width: 16%;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*阴影效果*/
        box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, 0.14);
        border-radius: 20px;
    }

    .element p {
        color: #000000;
        font-family: monospace;
        font-size: 16px;
        margin-top: 20px;
    }


</style>
</html>